<template>
  <div class="wrap">
    <!-- 筛选条件 -->
    <div class="labelBox">
      <form-title />
      <el-form :inline="true" :model="listQuery" class="pad-nt-20">
        <el-form-item label="手机号">
          <el-input
            v-model="listQuery.phone"
            placeholder="请输入手机号"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit"
            ><i class="el-icon-upload el-icon--right"></i>筛选</el-button
          >
          <el-button @click="reset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 表格 -->
    <div class="labelBox pad-a-20">
      <el-table
        border
        :data="tableData"
        style="width: 100%"
        ref="multipleTable"
        tooltip-effect="dark"
        @selection-change="handleSelectionChange"
        :header-cell-style="{ textAlign: 'center' }"
        :cell-style="{ textAlign: 'center' }"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column type="index" label="序号" width="55" />
        <el-table-column prop="recepitimgurl" label="发票信息图片地址">
          <template slot-scope="scope">
            <div class="img-wrap">
              <el-image
                style="width: 50px; height: 50px"
                :src="scope.row.recepitimgurl"
                :preview-src-list="[scope.row.recepitimgurl]"
              >
                <div slot="error" class="image-slot">
                  暂无图片
                </div>
              </el-image>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="completetime" label="完成时间">
          <template slot-scope="scope">
            {{ scope.row.completetime | filterTime }}
          </template>
        </el-table-column>
        <el-table-column prop="approvetime" label="审核时间">
          <template slot-scope="scope">
            {{ scope.row.approvetime | filterTime }}
          </template>
        </el-table-column>
        <el-table-column prop="apprvoeuserid" label="审核人" />
        <el-table-column prop="remark" label="备注" />
        <el-table-column prop="businessDrivingImg" label="销售方行驶证图片地址">
          <template slot-scope="scope">
            <div class="img-wrap">
              <el-image
                style="width: 50px; height: 50px"
                :src="scope.row.businessDrivingImg"
                :preview-src-list="[scope.row.businessDrivingImg]"
              >
                <div slot="error" class="image-slot">
                  暂无图片
                </div>
              </el-image>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="businessInsuranceImg" label="销售方保单图片地址">
          <template slot-scope="scope">
            <div class="img-wrap">
              <el-image
                style="width: 50px; height: 50px"
                :src="scope.row.businessInsuranceImg"
                :preview-src-list="[scope.row.businessInsuranceImg]"
              >
                <div slot="error" class="image-slot">
                  暂无图片
                </div>
              </el-image>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="businessInvoiceImg" label="销售方发票图片地址">
          <template slot-scope="scope">
            <div class="img-wrap">
              <el-image
                style="width: 50px; height: 50px"
                :src="scope.row.businessInvoiceImg"
                :preview-src-list="[scope.row.businessInvoiceImg]"
              >
                <div slot="error" class="image-slot">
                  暂无图片
                </div>
              </el-image>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="businessComplete" label="销售方是否完成上传">
          <template slot-scope="scope">{{
            scope.row.businessComplete ? "是" : "否"
          }}</template>
        </el-table-column>
        <el-table-column prop="businessCompleteTime" label="销售方完成上传时间">
          <template slot-scope="scope">
            {{ scope.row.businessCompleteTime | filterTime }}
          </template>
        </el-table-column>
        <el-table-column prop="clientDrivingImg" label="客户方行驶证图片地址">
          <template slot-scope="scope">
            <div class="img-wrap">
              <el-image
                style="width: 50px; height: 50px"
                :src="scope.row.clientDrivingImg"
                :preview-src-list="[scope.row.clientDrivingImg]"
              >
                <div slot="error" class="image-slot">
                  暂无图片
                </div>
              </el-image>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="clientInsuranceImg" label="客户方保单图片地址">
          <template slot-scope="scope">
            <div class="img-wrap">
              <el-image
                style="width: 50px; height: 50px"
                :src="scope.row.clientInsuranceImg"
                :preview-src-list="[scope.row.clientInsuranceImg]"
              >
                <div slot="error" class="image-slot">
                  暂无图片
                </div>
              </el-image>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="clientInvoiceImg" label="客户方发票图片地址">
          <template slot-scope="scope">
            <div class="img-wrap">
              <el-image
                style="width: 50px; height: 50px"
                :src="scope.row.clientInvoiceImg"
                :preview-src-list="[scope.row.clientInvoiceImg]"
              >
                <div slot="error" class="image-slot">
                  暂无图片
                </div>
              </el-image>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="clientComplete" label="客户方是否完成上传">
          <template slot-scope="scope">{{
            scope.row.clientComplete ? "是" : "否"
          }}</template>
        </el-table-column>
        <el-table-column prop="clientCompleteTime" label="客户方完成上传时间">
          <template slot-scope="scope">
            {{ scope.row.clientCompleteTime | filterTime }}
          </template>
        </el-table-column>
        <el-table-column prop="approveComplete" label="审核是否完成">
          <template slot-scope="scope">{{
            scope.row.approveComplete ? "是" : "否"
          }}</template>
        </el-table-column>
        <el-table-column prop="uploadmobile" label="上传人电话" />
        <el-table-column prop="agentmobile" label="代理上传人电话" />
        <el-table-column prop="uploadname" label="上传人姓名" />
        <el-table-column prop="store_name" label="店铺名" />
        <el-table-column prop="trade_Time" label="下单时间(实际支付时间)">
          <template slot-scope="scope">
            {{ scope.row.trade_Time | filterTime }}
          </template>
        </el-table-column>
        <el-table-column prop="serviceOfficial" label="是否为官方服务商">
          <template slot-scope="scope">{{
            scope.row.serviceOfficial ? "是" : "否"
          }}</template>
        </el-table-column>
        <el-table-column prop="remarks" label="操作" width="150" fixed="right">
          <template slot-scope="scope">
            <el-button type="primary" @click="open(scope.row)" size="mini">
              审核
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="listQuery.pageIndex"
        :limit.sync="listQuery.pageSize"
        @pagination="InvoiceCarList"
      />
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      listQuery: {
        pageSize: 10,
        pageIndex: 1,
        // 站点类型0全部，1普通加盟商，2合伙加盟商
        phone: "",
      },
      total: 0,
      tableData: [], //列表
    };
  },
  mounted() {
    this.InvoiceCarList();
  },
  methods: {
    // 商户管理列表
    InvoiceCarList() {
      let data = {
        pageIndex: this.listQuery.pageIndex,
        pageSize: this.listQuery.pageSize,
        mobile: this.listQuery.phone,
      };
      this.$api.newcar.InvoiceCarList(data).then((res) => {
        this.tableData = res.data.list;
        this.total = res.data.total;
      });
    },
    handleSelectionChange() {},
    handleSizeChange() {},
    handleCurrentChange() {},
    //筛选
    onSubmit() {
      this.listQuery.phone;
      this.InvoiceCarList();
    },
    // 重置
    reset() {
      this.listQuery.phone = "";
      this.InvoiceCarList();
    },
    open(type) {
      console.log("typetype", type);
      var data = {
        // aid: 17,
        id: type.id,
      };
      this.$msgbox({
        title: "通知",
        message: "此操作不可逆，请谨慎点击",
        showCancelButton: true,
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        beforeClose: (action, instance, done) => {
          if (action === "confirm") {
            instance.confirmButtonLoading = true;
            instance.confirmButtonText = "执行中...";
            setTimeout(() => {
              done();
              this.getWithdrawApprovePay(data);
              instance.confirmButtonLoading = false;
            }, 1000);
          } else {
            done();
          }
        },
      }).then((action) => {
        // this.$message({
        //   type: "info",
        //   message: "action: " + action,
        // });
      });
    },

    async getWithdrawApprovePay(data) {
      const res = await this.$api.newcar.AuditInvoice(data);
      if (res.code === 200) {
        this.$message({
          message: "恭喜你，审核成功",
          type: "success",
        });
      }
    },
  },
};
</script>

<style scoped lang="scss">
.form-top-btn {
  text-align: right;
}
</style>
